<template>
  <a-card size="small" :title="group.groupTxt" style="margin-top:10px;">
    <a-dropdown slot="extra">
      <a-menu slot="overlay" >
        <template v-for="(chart,index) in group.charts">
          <a-menu-item @click="details(chart.head.code)" :key="index">{{chart.head.name}}</a-menu-item>
        </template>
      </a-menu>
      <a-button type="primary" size="small" class="ant-btn-background-ghost">详情<a-icon type="down"/></a-button>
    </a-dropdown>
    <a-row :gutter="[16,16]" >
      <template v-for="(chart,index2) in group.charts">
        <a-col :xl="getGroupGrid(chart).xl" :lg="getGroupGrid(chart).lg" :md="getGroupGrid(chart).md" :sm="getGroupGrid(chart).sm" :key="index2">
          <group-auto-chart :title="true" :propsChartData="chart"></group-auto-chart>
        </a-col>
        <!-- 测试没问题 这个组件可以删掉GridGraphreportAutoChart -->
        <!-- <grid-graphreport-auto-chart :key="index2" :propsChartData="chart" ></grid-graphreport-auto-chart> -->
      </template>
    </a-row>
  </a-card>
</template>

<script>
// import GridGraphreportAutoChart from './GridGraphreportAutoChart'
import GroupAutoChart from './GroupAutoChart'
export default {
  name: 'GroupTemplateCard',
  components: {
    // GridGraphreportAutoChart,
    GroupAutoChart
  },
  props: ['group'],
  data() {
    return {
      groupGrid: {}
    }
  },
  methods: {
    details(code) {
      this.$router.push({ path: '/online/cggraphreport/chart/' + code })
    },
    getGroupGrid(chartData) {
      return chartData.param.groupGrid ? JSON.parse(chartData.param.groupGrid) : {}
    }
  }
}
</script>
<style scoped>

</style>
